86:I[903690,["/chat-static/_next/static/immutable/chunks/0t5koc6gywtjg.js","/chat-static/_next/static/immutable/chunks/2d5ra3e0435kr.js","/chat-static/_next/static/immutable/chunks/2v089ui-jko4d.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3fk4u2d6m9dj-.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1nag2_qii5d3b.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2d_66tvt_-qxg.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/3u537i82dxvjy.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/0xg0t_a536i1t.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/2-h-ggegl4qz4.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/2niei3xz3mph4.js","/chat-static/_next/static/immutable/chunks/3j1smr879e_f6.js","/chat-static/_next/static/immutable/chunks/1j4n_6xagcur9.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3b6uum5y_1nfz.js"],"ExplicitChatIdProvider"] 87:I[838238,["/chat-static/_next/static/immutable/chunks/0t5koc6gywtjg.js","/chat-static/_next/static/immutable/chunks/2d5ra3e0435kr.js","/chat-static/_next/static/immutable/chunks/2v089ui-jko4d.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3fk4u2d6m9dj-.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1nag2_qii5d3b.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2d_66tvt_-qxg.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/3u537i82dxvjy.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/0xg0t_a536i1t.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/2-h-ggegl4qz4.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/2niei3xz3mph4.js","/chat-static/_next/static/immutable/chunks/3j1smr879e_f6.js","/chat-static/_next/static/immutable/chunks/1j4n_6xagcur9.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3b6uum5y_1nfz.js"],"SWRDataProvider"] 88:T3d8c,[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/skeleton-loader.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useState } from "react" export default function SkeletonLoader() { const [activeBlock, setActiveBlock] = useState(0) const [loadedBlocks, setLoadedBlocks] = useState(0) // Track how many blocks have been loaded const totalBlocks = 5 useEffect(() => { const startAnimation = () => { const interval = setInterval(() => { setActiveBlock((prev) => { if (prev < totalBlocks) { const next = prev + 1 setLoadedBlocks(next) // Update loaded blocks count return next } else { // Animation complete, clear interval and pause clearInterval(interval) setTimeout(() => { setActiveBlock(0) // Reset to start setLoadedBlocks(0) // Reset loaded blocks startAnimation() // Restart the animation }, 2000) return -1 // Clear highlight during pause } }) }, 800) return interval } const interval = startAnimation() return () => clearInterval(interval) }, []) // Empty dependency array to run only once return (

{/* Browser Header */}

{/* Content */}

{/* Title */}

Loading animation...

{/* Top wide block */}

= 1 || activeBlock === -1 ? "opacity-100" : "opacity-0" }`} style={{ clipPath: loadedBlocks >= 1 || activeBlock === -1 ? "inset(0 0 0 0)" : "inset(0 100% 0 0)", animation: activeBlock === 1 ? "reveal-block 0.6s ease-out forwards" : "none", }} /> {activeBlock === 1 && (

)}

{/* Middle row - two blocks */}

= 2 || activeBlock === -1 ? "opacity-100" : "opacity-0" }`} style={{ clipPath: loadedBlocks >= 2 || activeBlock === -1 ? "inset(0 0 0 0)" : "inset(0 100% 0 0)", animation: activeBlock === 2 ? "reveal-block 0.6s ease-out forwards" : "none", }} /> {activeBlock === 2 && (

)}

= 3 || activeBlock === -1 ? "opacity-100" : "opacity-0" }`} style={{ clipPath: loadedBlocks >= 3 || activeBlock === -1 ? "inset(0 0 0 0)" : "inset(0 100% 0 0)", animation: activeBlock === 3 ? "reveal-block 0.6s ease-out forwards" : "none", }} /> {activeBlock === 3 && (

)}

{/* Bottom row - two blocks */}

= 4 || activeBlock === -1 ? "opacity-100" : "opacity-0" }`} style={{ clipPath: loadedBlocks >= 4 || activeBlock === -1 ? "inset(0 0 0 0)" : "inset(0 100% 0 0)", animation: activeBlock === 4 ? "reveal-block 0.6s ease-out forwards" : "none", }} /> {activeBlock === 4 && (

)}

= 5 || activeBlock === -1 ? "opacity-100" : "opacity-0" }`} style={{ clipPath: loadedBlocks >= 5 || activeBlock === -1 ? "inset(0 0 0 0)" : "inset(0 100% 0 0)", animation: activeBlock === 5 ? "reveal-block 0.6s ease-out forwards" : "none", }} /> {activeBlock === 5 && (

)}

) } [V0_FILE]typescriptreact:file="components/code-streaming.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useState } from "react" interface CodeSegment { id: number width: number // pixel width color: string animated: boolean } interface CodeLine { id: number segments: CodeSegment[] indent: number completed: boolean } const codeColors = ["bg-blue-400", "bg-gray-400", "bg-teal-400", "bg-purple-400", "bg-green-400", "bg-slate-500"] const linePatterns = [ { segments: [ { width: 80, color: 0 }, { width: 60, color: 1 }, { width: 20, color: 2 }, { width: 120, color: 3 }, ], indent: 0, }, { segments: [ { width: 100, color: 1 }, { width: 140, color: 4 }, ], indent: 1, }, { segments: [ { width: 160, color: 2 }, { width: 90, color: 1 }, { width: 12, color: 0 }, ], indent: 1, }, { segments: [ { width: 70, color: 3 }, { width: 12, color: 1 }, ], indent: 2, }, { segments: [{ width: 120, color: 4 }], indent: 2 }, { segments: [{ width: 90, color: 1 }], indent: 2 }, { segments: [{ width: 110, color: 2 }], indent: 2 }, { segments: [{ width: 12, color: 0 }], indent: 1 }, { segments: [ { width: 140, color: 1 }, { width: 80, color: 3 }, ], indent: 0, }, ] export default function CodeStreaming() { const [lines, setLines] = useState([]) const [currentLine, setCurrentLine] = useState(null) const [headerDots, setHeaderDots] = useState(0) useEffect(() => { let lineId = 0 let patternIndex = 0 let animationRunning = true const animateHeader = () => { if (!animationRunning) return setHeaderDots((prev) => (prev + 1) % 4) setTimeout(animateHeader, 800) } animateHeader() const startNewLine = () => { if (!animationRunning) return const pattern = linePatterns[patternIndex % linePatterns.length] const newLine: CodeLine = { id: lineId++, segments: pattern.segments.map((seg, index) => ({ id: index, width: seg.width, color: codeColors[seg.color], animated: false, })), indent: pattern.indent, completed: false, } setCurrentLine(newLine) patternIndex++ let segmentIndex = 0 const animateNextSegment = () => { if (segmentIndex >= newLine.segments.length) { setLines((prevLines) => [...prevLines.slice(-11), { ...newLine, completed: true }]) setCurrentLine(null) setTimeout(() => { if (animationRunning) { startNewLine() } }, 150) return } setCurrentLine((prev) => { if (!prev) return prev if (segmentIndex >= prev.segments.length) return prev const updated = { ...prev } updated.segments = [...prev.segments] updated.segments[segmentIndex] = { ...prev.segments[segmentIndex], animated: true } return updated }) segmentIndex++ setTimeout(animateNextSegment, 150 + segmentIndex * 50) } setTimeout(animateNextSegment, 100) } startNewLine() return () => { animationRunning = false } }, []) return (

component.tsx

{[0, 1, 2].map((i) => (

))}

{lines.map((line, index) => (

{line.segments.map((segment) => (

))}

))} {currentLine && (

{currentLine.segments.map((segment) => (

))}

)}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import SkeletonLoader from "@/components/skeleton-loader" import CodeStreaming from "@/components/code-streaming" export default function Home() { return (

) }7c:["$","$L86",null,{"chatId":"Enxm2C8Lu0V","children":["$","$L87",null,{"data":{"@\"active-block\",\"Enxm2C8Lu0V\",":{"id":"b_se5A5nRd28J","messageId":"N8BBzykXpXVhW8sY6x63ylf9LJLa6kKF","source":"$88","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"skeleton-loader","type":"code-project","project":"skeleton-loader","taskNameActive":"Making components responsive","taskNameComplete":"Made components responsive"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"Enxm2C8Lu0V\",":false,"":null},"children":"$L89"}]}]

About

Tags

Share

About

Tags

Share

More from jakeatgalileo

More Templates Like This